<template>
  <div class="search-blog-container">
    <view class="search-bar-box">
      <my-search
        :isShowInput="true"
        :placeholderText="defaultText"
        v-model="searchVal"
        :config="{
          backgroundColor: '#f1f0f3',
        }"
        @search="onSearchConfirm"
        @focus="onSearchFocus"
        @blur="onSearchBlur"
        @cancel="onSearchCancel"
        @clear="onSearchClear"
      ></my-search>
    </view>
    <!-- 热搜列表 -->
    <view class="search-hot-list-box card" v-if="showType === HOT_LIST">
      <search-hot-list @onSearch="onSearchConfirm"></search-hot-list>
    </view>
    <!-- 搜索历史-->
    <view class="search-history-box" v-else-if="showType === SEARCH_HISTORY">
      <search-history @onItemClick="onSearchConfirm" />
    </view>
    <!--搜索结果 -->
    <view class="search-result-list-box" v-else>
      <search-result-list ref="mescrollItem" :queryStr="searchVal" />
    </view>
  </div>
</template>

<script>
// 2. 引入mescroll-comp.js
import MescrollCompMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js';
// 导入 mapMutations 函数
import { mapMutations } from 'vuex';
import { getDefaultText } from 'api/search';
// 热搜列表
const HOT_LIST = '0';
// 搜索历史
const SEARCH_HISTORY = '1';
// 搜索结果
const SEARCH_RESULT = '2';

export default {
  // 3. 注册 mixins
  mixins: [MescrollCompMixin],
  data: () => ({
    // 输入框内容
    searchVal: '',
    // 输入框的placeholderText
    defaultText: '默认 placeholderText',

    // 默认情况下||点击输入框取消按钮时，显示【热搜列表】
    HOT_LIST,
    // 当searchBar获取焦点时||点击输入框清空按钮时，显示【搜索历史】
    SEARCH_RESULT,
    // 用户点击热搜列表时 item ||用户点击搜索历史 item ||用户按下搜索框键，显示【搜素结果】
    SEARCH_HISTORY,
    showType: HOT_LIST,
  }),
  created() {
    this.loadDefaultText();
  },
  methods: {
    ...mapMutations('search', ['addSearchData']),

    /**
     * 推荐搜索文本
     *
     */
    async loadDefaultText() {
      const { data: res } = await getDefaultText();
      this.defaultText = res.defaultText;
    },
    /**
     * 搜索内容
     */
    onSearchConfirm(val) {
      // 如果用户不输入搜索内容，默认使用【推荐搜索文本】
      this.searchVal = val ? val : this.defaultText;

      // 保存搜索历史数据
      this.addSearchData(this.searchVal);

      // 当用户进行输入时，如果包含输入的内容
      if (this.searchVal) {
        this.showType = SEARCH_RESULT;
      }
    },
    /**
     * 获取焦点
     */
    onSearchFocus(val) {
      this.showType = SEARCH_HISTORY;
    },
    /**
     * 失去焦点
     */
    onSearchBlur(val) {},
    /**
     * 清空内容
     */
    onSearchCancel(val) {
      this.showType = SEARCH_HISTORY;
    },
    /**
     * 取消按钮
     */
    onSearchClear(val) {
      this.showType = HOT_LIST;
    },
  },
};
</script>

<style lang="scss" scoped>
.search-blog-container {
  .search-bar-box {
    background-color: $uni-bg-color;
    padding: $uni-spacing-row-sm;
    position: sticky;
    top: 0px;
    z-index: 9;
  }
}
</style>
